<template>
	<div class="page__bd">
		<view class="weui-cells__title green">配送信息</view>
		<view class="weui-cells weui-cells_after-title">
			<navigator url="/pages/goodaddress/main?type=sebuy" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
				<view class="weui-cell__bd" v-if="seleaddr">
					{{seleaddr.name+'/'+seleaddr.tel}}
					<br /> {{seleaddr.province+seleaddr.city+seleaddr.area+seleaddr.address}}
				</view>
				<view class="weui-cell__bd" v-else>请选择</view>
				<view class="weui-cell__ft weui-cell__ft_in-access"></view>
			</navigator>

		</view>
		<div class="line"></div>
		<view class="weui-cells weui-cells_after-title">
			<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
				<view class="weui-cell__bd">配送时间</view>
				<view class="weui-cell__ft weui-cell__ft_in-access" @click='showTimeModel' >
					
{{date==null?'请选择时间':date}}
					

				</view>
			</navigator>
			<view class="weui-cell weui-cell_input">
				<view class="weui-cell__hd">
					<view class="weui-label">卡片留言</view>
				</view>
				<view class="weui-cell__bd">
					<input class="weui-input" placeholder="填写您最美好的祝福" v-model="cardmsg" />
				</view>
			</view>
			<view class="weui-cell weui-cell_input">
				<view class="weui-cell__hd">
					<view class="weui-label">特殊要求</view>
				</view>
				<view class="weui-cell__bd">
					<input class="weui-input" placeholder="填写特殊要求" v-model="otherrequest" />
				</view>
			</view>
		</view>
		<div class="line"></div>
		<view class="weui-cells__title green">订购信息</view>
		<view class="weui-cells weui-cells_after-title">
			<view class="weui-cell weui-cell_input">
				<view class="weui-cell__hd">
					<view class="weui-label">订购人</view>
				</view>
				<view class="weui-cell__bd">
					<input class="weui-input" v-model="sendby" />
				</view>
				<view class="weui-cell__ft">
					<view class="weui-vcode-btn">
						<icon class="weui-icon-checkbox_circle radio" type="circle" size="23" v-if="noname==0" @click="nonames(0)"></icon>
						<icon class="weui-icon-checkbox_success radio" type="success" size="23" v-if="noname==1" @click="nonames(1)"></icon>

						<span>匿名配送</span></view>
				</view>
			</view>
			<view class="weui-cell weui-cell_input" v-if="usescore>=0">
				<view class="weui-cell__hd">
					<view class="weui-label">使用积分</view>
				</view>

				<view class="weui-cell__ft">
					<view class="weui-vcode-btn">

						<icon class="weui-icon-checkbox_circle radio" type="circle" size="23" v-if="!isusescore" @click="isusescores()"></icon>
						<icon class="weui-icon-checkbox_success radio" type="success" size="23" v-if="isusescore" @click="isusescores()"></icon>

						<span v-if="isusescore">使用{{usescore}}积分</span>
						<span v-if="!isusescore">不使用积分</span>
					</view>
				</view>
			</view>
			<view class="weui-cell weui-cell_input">
				<view class="weui-cell__hd">
					<view class="weui-label">订购人电话</view>
				</view>
				<view class="weui-cell__bd">
					<input class="weui-input" placeholder="方便花店通知收花情况" v-model="sendbytel" />
				</view>
			</view>
		</view>
		<view class="weui-cells__title green">商品信息</view>
		<view class="weui-cells weui-cells_after-title marginb">
			<view class="weui-cell">
				<view class="weui-cell__hd">
					<image :src="'https://tp5.blver.cn'+seleflw.goods_image" style="margin-right: 5px;vertical-align: middle;width:80px; height: 80px;"></image>
				</view>
				<view class="weui-cell__bd">{{seleflw.goods_title}}</view>
				<view class="weui-cell__ft">{{seleflw.selling_price}} × {{number}}</view>
			</view>
		</view>

		<div class="bottom_float_div pf row" style="z-index:100">

			<div class="collection " style="float:left;width:50%">

				<div>合计{{totalprice*number}}</div>

			</div>

			<div class="buyNow gw1" style="width:50%; float:left" @click="suborder()">
				<a style="color:#fff;">
					<div>立即购买</div>
				</a>
			</div>
		</div>

		<view class="modal " :class="timeShow?'modal_show':'modal_hide'">
			<!-- 点击弹出框外部取消 -->
			<view class='modal_cancel' @click='modelCancel'></view>

			<!-- 弹出框主体 -->
			<view class='modal_container'>
				<!-- header -->
				<view class='modal_header'>
					<view>预定时间</view>
					<view class='header_tip'>一周内的预订</view>
				</view>
				<!-- 日期 -->
				<view class="time">
					<scroll-view class="time_scroll" scroll-x="true" style="width: 100%">
						<view :data-index="index" @click="timeClick" class="scroll_item " :class="currentTab==index?'time_active':''" v-for="(item,index) in timeList" :key="index">
							<view style="height:25px;line-height:25px">{{item.name}}</view>
							<view style="height:25px;line-height:25px">{{item.date}}</view>
						</view>
					</scroll-view>
				</view>
				<!-- 小时 -->
				<view class='hour'>
					<view @click="hourClick" class="hour_item" :class="[i.isShow?'':'hour_unactive' ,  hourIndex==index2?'hour_active':'']" v-for="(i,index2) in hourList" :key="index2" :data-index="index2" :data-isshow="i.isShow">{{i.hour}}</view>
				</view>
			</view>
		</view>

	</div>
</template>

<script>
	import { mapGetters, mapMutations } from 'vuex'
	import { requests } from "../../../static/js/network"
	import { getMonthDay, dateTimePicker } from "../../../static/js/datepicker"
	export default {
		data() {
			return {
				dateTimeArray1: null,
				noname: 0,
				date: null,
				score: wx.getStorageSync('userinfo').score,
				isusescore: true,
				cardmsg: "",
				otherrequest: '',
				sendby: '',
				sendbytel: "",
				number: '',
				startYear: 2000,
				endYear: 2050,

				timeList: [],
				//时间数组
				hourList: [{
						hour: "8:00",
						n: 8,
						isShow: true
					},
					{
						hour: "9:00",
						n: 9,
						isShow: true
					}, {
						hour: "10:00",
						n: 10,
						isShow: true
					}, {
						hour: "12:00",
						n: 11,
						isShow: true
					}, {
						hour: "13:00",
						n: 13,
						isShow: true
					}, {
						hour: "14:00",
						n: 14,
						isShow: true
					}, {
						hour: "15:00",
						n: 15,
						isShow: true
					}, {
						hour: "16:00",
						n: 16,
						isShow: true
					}, {
						hour: "17:00",
						n: 17,
						isShow: true
					}, {
						hour: "18:00",
						n: 18,
						isShow: true
					}, {
						hour: "19:00",
						n: 19,
						isShow: true
					}
				],
				//是否显示
				timeShow: false,
				currentTab: 0,
				//选择时间
				chooseHour: "",
				// 选择日期
				chooseTime: "",
				hourIndex: -1
			}
		},
		computed: {
			...mapGetters([
				'seleaddr',
				'seleflw'
			]),
			usescore() {
				if(this.isusescore==false){
					return 0
				}
				
				if(this.score > Number(this.seleflw.selling_price) * 100 - 1) {
					return Number(this.seleflw.selling_price) * 100 - 1 //上限
				} else {
					return Number(wx.getStorageSync('userinfo').score)
				}

			},
			totalprice() {
				if(this.isusescore==false){
					return Number(this.seleflw.selling_price) 
				}
				return (Number(this.seleflw.selling_price) - this.usescore / 100).toFixed(2)
			}
		},
		onLoad() {
			
			
			let self=this
			
			if(this.$root.$mp.query.type && this.$root.$mp.query.type == 'sadd') {
				console.log('选择地址带参数回来的')

			} else {
				console.log('否则')

				Object.assign(this.$data, this.$options.data())
			}

			
			Date.prototype.Format = function(format) {
				var o = {
					"M+": this.getMonth() + 1, //month
					"d+": this.getDate(), //day
					"h+": this.getHours(), //hour
					"m+": this.getMinutes(), //minute
					"s+": this.getSeconds(), //second
					"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
					"S": this.getMilliseconds() //millisecond
				}
				if(/(y+)/.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				}
				for(var k in o) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
					}
				}
				return format;
			}
			Date.prototype.DateAdd = function(interval, number) {
				number = parseInt(number);
				var date = new Date(this.getTime());
				//
				switch(interval) {
					case "y":
						date.setFullYear(this.getFullYear() + number);
						break;
					case "m":
						date.setMonth(this.getMonth() + number);
						break;
					case "d":
						date.setDate(this.getDate() + number);
						break;
					case "w":
						date.setDate(this.getDate() + 7 * number);
						break;
					case "h":
						date.setHours(this.getHours() + number);
						break;
					case "n":
						date.setMinutes(this.getMinutes() + number);
						break;
					case "s":
						date.setSeconds(this.getSeconds() + number);
						break;
					case "l":
						date.setMilliseconds(this.getMilliseconds() + number);
						break;
				}
				return date;
			}
			var dateList = [];
			//7天
			var now = new Date();
			var day = now.getDay();
			//
			for(var i = 0; i < 7; i++) {
				var d = {};
				if(i == 0) {
					var w = "今天"
				}
				if(i == 1) {
					var w = "明天"
				}
				if(i == 2) {
					var w = "后天"
				}
				if(i == 3) {
					if(day == 1) {
						var w = "周四"
					}
					if(day == 2) {
						var w = "周五"
					}
					if(day == 3) {
						var w = "周六"
					}
					if(day == 4) {
						var w = "周日"
					}
					if(day == 5) {
						var w = "周一"
					}
					if(day == 6) {
						var w = "周二"
					}
					if(day == 7) {
						var w = "周三"
					}
				}
				if(i == 4) {
					if(day == 1) {
						var w = "周五"
					}
					if(day == 2) {
						var w = "周六"
					}
					if(day == 3) {
						var w = "周日"
					}
					if(day == 4) {
						var w = "周一"
					}
					if(day == 5) {
						var w = "周二"
					}
					if(day == 6) {
						var w = "周三"
					}
					if(day == 7) {
						var w = "周四"
					}
				}
				if(i == 5) {
					if(day == 1) {
						var w = "周六"
					}
					if(day == 2) {
						var w = "周日"
					}
					if(day == 3) {
						var w = "周一"
					}
					if(day == 4) {
						var w = "周二"
					}
					if(day == 5) {
						var w = "周三"
					}
					if(day == 6) {
						var w = "周四"
					}
					if(day == 7) {
						var w = "周五"
					}
				}
				if(i == 6) {
					if(day == 1) {
						var w = "周日"
					}
					if(day == 2) {
						var w = "周一"
					}
					if(day == 3) {
						var w = "周二"
					}
					if(day == 4) {
						var w = "周三"
					}
					if(day == 5) {
						var w = "周四"
					}
					if(day == 6) {
						var w = "周五"
					}
					if(day == 7) {
						var w = "周六"
					}
				}
				d.name = w;
				d.date = new Date().DateAdd('d', i).Format("MM-dd");
				dateList.push(d)
			}
			
			self.timeList = dateList
console.log(self.timeList)
			//初始化判断
			//当前时间
			var hour = new Date().getHours();
			for(var i = 0; i < this.hourList.length; i++) {
				var list = this.hourList;
				//过时不可选
				if(this.hourList[i].n <= hour) {
					list[i].isShow = false;
					this.hourList = list

				}
			}

			
			this.number = this.seleflw.number

			

		},
		methods: {

			//弹出按钮
			showTimeModel() {
				console.log(this.timeList)
				this.timeShow = !this.timeShow
					this.chooseTime= this.timeList[0].date

			},
			//点击外部取消
			modelCancel() {
				this.timeShow = !this.timeShow
					this.chooseTime= this.timeList[0].date

			},
			//日期选择
			timeClick(e) {
				//非今天-过时不判断
				if(e.mp.currentTarget.dataset.index != 0) {
					var list = this.hourList;
					for(var i = 0; i < list.length; i++) {
						list[i].isShow = true;
					}
					this.hourList = list

				} else {
					//过时不可预约
					var hour = new Date().getHours();
					for(var i = 0; i < this.hourList.length; i++) {
						var list = this.hourList;
						if(this.hourList[i].n <= hour) {
							list[i].isShow = false;
							this.hourList = list

						}
					}
				}
				this.currentTab = e.mp.currentTarget.dataset.index
					this.chooseTime = this.timeList[e.mp.currentTarget.dataset.index].date
					this.chooseHour = ""
					this.hourIndex = -1

				console.log(this.chooseTime)
			},
			// 时间选择
			hourClick(e) {
				console.log(e)
				var that = this;
				// 时间不可选择
				if(!e.mp.currentTarget.dataset.isshow) {
					return false;
				}
				this.hourIndex = e.mp.currentTarget.dataset.index,
				this.chooseHour = this.hourList[e.mp.currentTarget.dataset.index].hour

				var chooseTime = new Date().getFullYear() + "-" + this.chooseTime + " " + this.chooseHour
				console.log(chooseTime)
				this.date=chooseTime
			},

			changeDateTimeColumn1(e) {
				var arr = this.date,
					dateArr = this.dateTimeArray1;

				arr[e.mp.detail.column] = e.mp.detail.value;
				dateArr[2] = getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);

				this.dateTimeArray1 = dateArr
					this.date = arr

			},
			suborder() {
				
				let self = this
				if(this.seleaddr == null) {
					wx.showToast({
						title: '请选择地址',
						icon: 'none',
						duration: 2000
					})
					return
				}
console.log(this.usescore)
			
				requests({
					url: 'https://tp5.blver.cn/api/wechat/makeOrder',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					data: {
						id: this.seleflw.id,
						addressid: this.seleaddr.id,
						sendtime: this.date,
						cardmsg: this.cardmsg,
						otherrequest: this.otherrequest,
						sendby: this.sendby,
						sendbytel: this.sendbytel,
						noname: this.noname,
						score: this.usescore,
						session3rd: wx.getStorageSync('userinfo').session3rd,
						fxsid: wx.getStorageSync('fxsid'),
						number: this.number
					},

					success: function(res) {
						console.log(res)

						if(res.data.status == 'error') {
							wx.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
							return
						}
						wx.requestPayment({
							'timeStamp': res.data.prepay_params.timestamp,
							'nonceStr': res.data.prepay_params.nonceStr,
							'package': res.data.prepay_params.package,
							'signType': 'MD5',
							'paySign': res.data.prepay_params.paySign,
							'success': function(res3) {

								console.log(res3)
								wx.redirectTo({ //保留当前页面，跳转到应用内的某个页面
											url: "/pages/orderdetail/main?id=" + res.data.order_no
										})

							},
							'fail': function(res3) {

								requests({
									url: 'https://tp5.blver.cn/api/wechat/deleteFailOrder',
									method: 'POST',
									header: {
										'content-type': 'application/json',
										'content-type': 'application/x-www-form-urlencoded' // 默认值
									},
									data: {
										orderno: res.data.order_no,
										session3rd: wx.getStorageSync('userinfo').session3rd
									},
									success: function(res4) {
										console.log(res4)

										wx.showToast({
											title: '您的订单已取消',
											icon: 'none',
											duration: 2000
										})

										
									}
								})

							}
						})

					}
				})
			},
			isusescores() {
					this.isusescore = !this.isusescore
				
			
			},
			nonames(indexs) {
				if(indexs == 0) {
					this.noname = 1
				} else if(indexs == 1) {
					this.noname = 0
				}

			},
			bindDateChange(e) {

				this.date = e.mp.detail.value

			},
		}
	}
</script>

<style>
	.radio {
		vertical-align: text-top
	}
	
	.page__bd {
		font-size: 24rpx!important
	}
	
	.green {
		color: #FF5D5D
	}
	
	.line {
		background: #F0F0F0;
		height: 10rpx
	}
	
	.pf {
		position: fixed
	}
	
	.bottom_float_div {
		width: 100%;
		text-align: center;
		bottom: 0;
		background: #fff;
		left: 0;
		right: 0;
		max-width: 620px;
		margin: 0 auto
	}
	
	.marginb {
		margin-bottom: 45px
	}
	
	.row {
		flex-direction: row;
		display: flex
	}
	
	.pf {
		position: fixed
	}
	
	.collection {
		width: 16%;
		color: #999;
		height: 45px;
		line-height: 45px;
		border-top: 1px #cacaca solid
	}
	
	.buyNow {
		width: 42%;
		width: 100%;
		line-height: 45px;
		background-color: #f44;
		color: #fff
	}
	
	
	.showBtn {
    position: absolute;
    bottom: 10px;
    width: 100%;
}

/* 是否显示 */

.modal_show {
    display: block;
}

.modal_hide {
    display: none;
}

/* main */

.modal {
    position: fixed;
    z-index: 999;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

/* cancel */

.modal_cancel {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

/* container */

.modal_container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    background: #fff;
}

/* header */

.modal_header {
    padding: 10px;
    text-align: center;
    font-size: 14px;
}

.header_tip {
    position: relative;
    font-size: 12px;
    padding-top: 5px;
    color: #999;
}

/* time */
.time {
    height: 52px;
    background: #fafafa;
    text-align: center;
    font-size: 14px;
}
.time_scroll {
    white-space: nowrap;
}
.scroll-view-item {
    height: 50px;
}
.scroll_item {
    display: inline-block;
    width: 80px;
    height: 50px;
}
/* time_active */
.time_active {
    color: #159de3;
    border-bottom: 2px solid #159de3;
}
/* hour */
.hour {
    padding: 10px 0 0 10px;
    height: 135px;
    border-bottom: 1px solid #eee;
}
.hour_item {
    width: 22%;
    box-sizing: border-box;
    height: 35px;
    line-height: 35px;
    border-radius: 5px;
    text-align: center;
    float: left;
    border: 1px solid #eee;
    font-size: 14px;
    margin-right: 3%;
    margin-bottom: 10px;
}
/* hour_active */
.hour_active {
    background: #159de3;
    color: #fff;
    border: 1px solid #159de3;
}
/* hour_unactive */
.hour_unactive {
    color: #999;
}
</style>